<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label">录音</label>
      <div class="layui-input-block">
        <input type="ly" name="ly" placeholder="请输入录音" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">账号名称</label>
      <div class="layui-input-block">
        <input type="ygxm" name="ygxm" placeholder="请输入账号名称" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">主叫号码</label>
      <div class="layui-input-block">
        <input type="zjhm" name="zjhm" placeholder="请输入主叫号码" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">小号</label>
      <div class="layui-input-block">
        <input type="xh" name="xh" placeholder="请输入小号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">被叫号码</label>
      <div class="layui-input-block">
        <input type="bjhm" name="bjhm" placeholder="请输入被叫号码" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block">
        <input type="start" name="start" placeholder="请输入状态" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">状态明细</label>
      <div class="layui-input-block">
        <input type="startinfo" name="startinfo" placeholder="请输入状态明细" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">主叫接通时间</label>
      <div class="layui-input-block">
        <input type="zjjttime" name="zjjttime" placeholder="请输入主叫接通时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">被叫接通时间</label>
      <div class="layui-input-block">
        <input type="bjjttime" name="bjjttime" placeholder="请输入被叫接通时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">结束时间</label>
      <div class="layui-input-block">
        <input type="endtime" name="endtime" placeholder="请输入结束时间" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">创建时间</label>
      <div class="layui-input-block">
        <input type="ctime" name="ctime" placeholder="请输入创建时间" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="tThjlmx:list">
    <div class="layui-form-item">
        <div class="layui-input-inline layui-form">
            <input type="text" name="date" class="layui-input" id="test-range2" placeholder="请选择时间范围">
        </div>
          <div class="layui-input-inline">
            <input type="text" id="zjhm" class="layui-input"  autocomplete="off" placeholder="请输入主叫号码">
          </div>
        <div class="layui-input-inline">
            <input type="text" id="bjhm" class="layui-input"  autocomplete="off" placeholder="请输入被叫号码">
        </div>
        <div class="layui-input-inline layui-form" id="deptSCid"  style="display: none;">
            <select id="deptSC">
                <option value="">请选择部门</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form " id="ygSCid" style="display: none;">
            <select id="ygSC">
                <option value="">请选择员工</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" id="ztSCid">
            <select id="ztSC">
                <option value="">请选择状态</option>
                <option value="0">拨打失败</option>
                <option value="1">已接通</option>
                <option value="2">未接通</option>
                <option value="3">未回调</option>
                <option value="4">已回调</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select id="typeSC">
                <option value="2">>=</option>
                <option value="3"><=</option>
                <option value="1">=</option>
            </select>
            <input type="text" id="thsc" class="layui-input"  autocomplete="off" placeholder="通话时长输入具体秒数">
        </div>
      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container layui-hide">
    <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="tThjlmx:add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="tThjlmx:delete">删除</button>
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs layui-hide" lay-event="edit" shiro:hasPermission="tThjlmx:update">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs layui-hide" lay-event="del" shiro:hasPermission="tThjlmx:delete">删除</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  userInfo = CoreUtil.getData("userInfo");
  userRoles = CoreUtil.getData("userRoles");
  userDepts = CoreUtil.getData("userDepts");
  sysRolesList = CoreUtil.getData("sysRolesList");
  userSysUsers = CoreUtil.getData("userSysUsers");
  hwtj = CoreUtil.getData("hwtj");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  var isycVo;
  var gly = [
      {field: 'ly', title: '录音',templet: function (data) {
              if (data.ly) {
                  return '<audio id="audio_'+data.id+'" src="'+data.ly+'" style="display:none;"></audio><a href="javascript:void(0);"><i class="layui-icon" onclick="playMusic(\'audio_'+data.id+'\', this)">&#xe652;</i></a>&nbsp;&nbsp;<a download target="_blank" href="'+data.ly+'?response-content-type=application/octet-stream"><i class="layui-icon">&#xe601;</i></a>';
              } else {
                  return '';
              }
          }, sort: true,align: 'center' ,width: '5%'},
      {field: 'ygxm', title: '账号名称', sort: true,align: 'center' ,width: '6%'},
      {field: 'zjhm', title: '主叫号码', sort: true,align: 'center'},
      {field: 'xh', title: '小号', sort: true,align: 'center'},
      {field: 'bjhm', title: '被叫号码', templet:function(data) {
              if (!!data.bjhm) {
                  return data.bjhm;
              } else {
                  return '';
              }
          },sort: true,align: 'center'},
      {field: 'start', title: '状态',  templet:function(data) {
              if (data.start== 0) {
                  return '拨打失败';
              } else if (data.start== 1) {
                  return '已接通';
                  // return '拨出';
              } else if(data.start== 2) {
                  return '未接通';
              } else if(data.start== 3) {
                  return '被叫接通';
              } else {
                  return '';
              }
          },sort: true,align: 'center'},
      {field: 'startinfo', title: '状态明细', templet:function(data) {
              if (data.startinfo== 0) {
                  return '主叫挂断';
              } else if (data.startinfo== 1) {
                  return '被叫挂断';
              } else if(data.startinfo== 2) {
                  return '主叫放弃';
              } else if(data.startinfo== 3) {
                  return '被叫放弃';
              }else if(data.startinfo== 4) {
                  return '其他';
              } else {
                  return '';
              }
          }, sort: true,align: 'center'},
      {field: 'zjjttime', title: '主叫接通时间', sort: true,align: 'center'},
      {field: 'bjjttime', title: '被叫接通时间', sort: true,align: 'center'},
      {field: 'endtime', title: '结束时间', sort: true,align: 'center'},
      {field: 'ctime', title: '创建时间', sort: true,align: 'center'},
      {field: 'thsc', title: '通话时长', sort: true,align: 'center'},
  ];
 var tableCols = [
     {field: 'ly', title: '录音' , templet: function (data) {
             if (data.ly) {
                 return '<audio id="audio_'+data.id+'" src="'+data.ly+'" style="display:none;"></audio><a href="javascript:void(0);"><i class="layui-icon" onclick="playMusic(\'audio_'+data.id+'\', this)">&#xe652;</i></a>&nbsp;&nbsp;<a download target="_blank" href="'+data.ly+'?response-content-type=application/octet-stream"><i class="layui-icon">&#xe601;</i></a>';
             } else {
                 return '';
             }

         }, sort: true,align: 'center' ,width: '5%'},
     {field: 'ygxm', title: '账号名称', sort: true, sort: true,align: 'center' ,width: '6%'},
     {field: 'zjhm', title: '主叫号码', sort: true,align: 'center'},
     // {field: 'xh', title: '小号', sort: true},
     {field: 'bjhm', title: '被叫号码', templet:function (item) {

             if (!!item.bjhm && item.bjhm.length == 11 && isycVo == 1) { //是否隐藏
                 return item.bjhm.replace(item.bjhm.substring(3, 7), "****");
             } else if (!!item.bjhm && item.bjhm.length > 11 && isycVo == 1) { //是否隐藏
                 return item.bjhm.replace(item.bjhm.substring(3, 9), "****");
             } else {
                 if (!!item.bjhm) {
                     return item.bjhm;
                 } else {
                     return '';
                 }
             }
         },sort: true,align: 'center'},
     {field: 'start', title: '状态', templet:function(data) {
             if (data.start== 0) {
                 return '拨打失败';
             } else if (data.start== 1) {
                 return '已接通';
                 // return '拨出';
             } else if(data.start== 2) {
                 return '未接通';
             } else if(data.start== 3) {
                 return '被叫接通';
             } else {
                 return '';
             }
         }, sort: true,align: 'center'},
     // {field: 'startinfo', title: '状态明细', sort: true},
     {field: 'zjjttime', title: '主叫接通时间', sort: true,align: 'center'},
     {field: 'bjjttime', title: '被叫接通时间', sort: true,align: 'center'},
     {field: 'endtime', title: '结束时间', sort: true,align: 'center'},
     {field: 'ctime', title: '创建时间', sort: true,align: 'center'},
     {field: 'thsc', title: '通话时长', sort: true,align: 'center'},
 ];

  Date.prototype.Format = function (fmt) {
      var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "H+": this.getHours(), //小时
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          S: this.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt))
          fmt = fmt.replace(
              RegExp.$1,
              (this.getFullYear() + "").substr(4 - RegExp.$1.length)
          );
      for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
              fmt = fmt.replace(
                  RegExp.$1,
                  RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
              );
      return fmt;
  };

  layui.use(['table', 'layer', 'laydate'], function () {

// 时间戳的处理
      layui.laytpl.toDateString = function(d, format){
          var date = new Date(d || new Date())
              ,ymd = [
              this.digit(date.getFullYear(), 4)
              ,this.digit(date.getMonth() + 1)
              ,this.digit(date.getDate())
          ]
              ,hms = [
              this.digit(date.getHours())
              ,this.digit(date.getMinutes())
              ,this.digit(date.getSeconds())
          ];

          format = format || 'yyyy-MM-dd HH:mm:ss';

          return d ? format.replace(/yyyy/g, ymd[0])
              .replace(/MM/g, ymd[1])
              .replace(/dd/g, ymd[2])
              .replace(/HH/g, hms[0])
              .replace(/mm/g, hms[1])
              .replace(/ss/g, hms[2]) : '';
      };
// 数字前置补零
      layui.laytpl.digit = function(num, length, end){
          var str = '';
          num = String(num);
          length = length || 2;
          for(var i = num.length; i < length; i++){
              str += '0';
          }
          return num < Math.pow(10, length) ? str + (num|0) : num;
      };

      let data = new Date();
      let year = data.getFullYear();
      let month = data.getMonth() + 1;
      let day = data.getDate();
      var eDate =   (new Date()).Format("yyyy-MM-dd");;
      var sDate =   (new Date()).Format("yyyy-MM-dd");;
      var dateValue = sDate + ' - ' + eDate;
      laydate.render({
          elem: '#test-range2' ,//指定元素
          range: true,
          value: dateValue
      });

      //加载表格
      var tableIns = function () {
          var range =  $('#test-range2').val().replace(/ - /g,' 至 ');
          var split = range.split(' 至 ');
          //这里以搜索为例
          var whereData = { //设定异步数据接口的额外参数，任意设
              startDate: split[0]+" 00:00:00",
              endDate: split[1]+" 23:59:59",
          }
          //根据部门区分表格
          var deptName = userInfo.sysRoleName;;
          if (!tableIns1 && (deptName.indexOf("管理员")>-1 || deptName.indexOf("代理")>-1)) {
              if (deptName.indexOf("管理员")>-1) {
                  tableCols = gly;
              }
              //加载table
              tableIns1 = table.render({
                  elem: '#showTable'
                  , contentType: 'application/json'
                  , headers: {"authorization": token}
                  , page: true //开启分页
                  , where: whereData
                  , url: '/tThjlmx/listByPage' //数据接口
                  , method: 'POST'
                  , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                      return {
                          "code": res.code, //解析接口状态
                          "msg": res.msg, //解析提示文本
                          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                      }
                  }
                  , cols: [tableCols]
                  , toolbar: '#toolbar'
              });
          }
          else {
              if (!deptName.indexOf("员工")>-1) {
                  $("#ygSCid").show();
                  $("#deptSCid").show();
              }
              //加载table
              tableIns1 = table.render({
                  elem: '#showTable'
                  , contentType: 'application/json'
                  , headers: {"authorization": token}
                  , page: true //开启分页
                  , where: whereData
                  , url: '/tThjlmx/listByPage' //数据接口
                  , method: 'POST'
                  , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                      return {
                          "code": res.code, //解析接口状态
                          "msg": res.msg, //解析提示文本
                          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                      }
                  }
                  , cols: [tableCols]
                  , toolbar: '#toolbar'
              });
          }
      };

      var info  = function () {
          //加载表格
          tableIns();
         var tThjlmx_infoData = CoreUtil.getData("tThjlmx_infoData");
          //请选择员工、请选择部门;
          if (!!tThjlmx_infoData) {
              var data = tThjlmx_infoData
              //部门
              var deptSC = $("#deptSC");
              $.each(data.dept, function (index, item) {
                  deptSC.append("<option value=" + item + ">" + item + "</option>");
              });
              //员工
              var ygSC = $("#ygSC");
              $.each(data.ygxm, function (index, item) {
                  if (!!item) {
                      ygSC.append("<option value=" + item + ">" + item + "</option>");
                  }
              });
              form.render("select");
              isycVo = data.isyc;
          } else {
              CoreUtil.sendGet("/tThjlmx/infoData/", null, function (res) {
                  debugger
                  var code = res.code;
                  var data = res.data;
                  //请选择员工、请选择部门;
                  if (code == 0) {
                      CoreUtil.setData("tThjlmx_infoData",res.data);
                      //部门
                      var deptSC = $("#deptSC");
                      $.each(data.dept, function (index, item) {
                          deptSC.append("<option value=" + item + ">" + item + "</option>");
                      });
                      //员工
                      var ygSC = $("#ygSC");
                      $.each(data.ygxm, function (index, item) {
                          if (!!item) {
                              ygSC.append("<option value=" + item + ">" + item + "</option>");
                          }
                      });
                      form.render("select");
                      isycVo = data.isyc;
                  }
              });
          }
      };
      info();

    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'add':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("新增");
          $(".operation input[name=id]").val("");
          $(".operation input[name=ly]").val("");
          $(".operation input[name=ygxm]").val("");
          $(".operation input[name=zjhm]").val("");
          $(".operation input[name=xh]").val("");
          $(".operation input[name=bjhm]").val("");
          $(".operation input[name=start]").val("");
          $(".operation input[name=startinfo]").val("");
          $(".operation input[name=zjjttime]").val("");
          $(".operation input[name=bjjttime]").val("");
          $(".operation input[name=endtime]").val("");
          $(".operation input[name=ctime]").val("");
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'edit':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("编辑");
          $(".operation input[name=id]").val(data.id);
          $(".operation input[name=ly]").val(data.ly);
          $(".operation input[name=ygxm]").val(data.ygxm);
          $(".operation input[name=zjhm]").val(data.zjhm);
          $(".operation input[name=xh]").val(data.xh);
          $(".operation input[name=bjhm]").val(data.bjhm);
          $(".operation input[name=start]").val(data.start);
          $(".operation input[name=startinfo]").val(data.startinfo);
          $(".operation input[name=zjjttime]").val(data.zjjttime);
          $(".operation input[name=bjjttime]").val(data.bjjttime);
          $(".operation input[name=endtime]").val(data.endtime);
          $(".operation input[name=ctime]").val(data.ctime);
          break;
      }
    });

    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        key: $("#key").val()
      };
      CoreUtil.sendPost("/tThjlmx/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/tThjlmx/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/tThjlmx/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/tThjlmx/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
  });
  function search() {
      var range =  $('#test-range2').val().replace(/ - /g,' 至 ');
      var split = range.split(' 至 ');
      //这里以搜索为例
      tableIns1.reload({
          where: { //设定异步数据接口的额外参数，任意设
              startDate: split[0]+" 00:00:00",
              endDate: split[1]+" 23:59:59",
              zjhm: $("#zjhm").val(),
              bjhm: $("#bjhm").val(),
              ygxm: $("#ygSC").val(),
              org: $("#deptSC").val(),
              start: $("#ztSC").val(),
              typeSC: $("#typeSC").val(),
              thsc: $("#thsc").val()
          }
          , page: {
              curr: 1 //重新从第 1 页开始
          }
      });
  };

  function playMusic(id, that) {

      var audioEle = document.getElementById(id);
      if (audioEle.paused) { /*如果已经暂停*/
          var audio = $('.layui-table audio');
          for (var i = 0; i < audio.length; i++) {
              audio[i].pause();
// audio[i].currentTime = 0;
              $("#" + audio[i].id).next().children().html('&#xe652;');
          }
          audioEle.play();   //播放
// audioEle.onloadedmetadata = function () {
//     audioEle.play();   //播放
// };
          $(that).html('&#xe651;');
          audioEle.loop = false;
          audioEle.addEventListener('ended', function () {
              $(that).html('&#xe652;');
          }, false);
      } else {
          audioEle.pause();  //暂停
// audioEle.currentTime = 0;
          $(that).html('&#xe652;');
      }
  };
</script>